<template>
    <div class="user-list">
    <el-table
            :data="usersList.filter(data => !search || data.username.toLowerCase().includes(search.toLowerCase()))"
            class="table-pos" >
        <el-table-column
                label="成员名"
                prop="username">
        </el-table-column>

        <el-table-column
                align="right">
            <template slot="header" slot-scope="scope">
                <el-input
                        v-model="search"
                        size="mini"
                        placeholder="搜索群成员"/>
            </template>
            <template slot-scope="scope">
                <div v-if="isGroupManager === true">
                    <template v-if="scope.row.userId === userId">
                        <i class="el-icon-user-solid"></i>
                        <!--<img :src="aa" class="image-pos"/>-->
                    </template>
                    <el-button type="text" icon="el-icon-setting" @click.stop="handleSet(scope.$index, scope.row)"></el-button>
                </div>
            </template>
        </el-table-column>
    </el-table>

    <el-dialog title="设置" width="150px" :visible.sync="groupSetVisible" append-to-body >
        <group-set v-if="groupSetVisible" ref="groupSet"
                   :current-item="currentItem" :users-list="usersList"
                    v-on:success="success(res)"></group-set>
    </el-dialog>
    </div>
</template>

<script>
    import {mapGetters} from "vuex";
    import GroupSet from "_c/group-set";
    import {isOrNotGroupManager} from "_a/userlist";
    /*import aa from "src/assests/icons/notalk.png"*/

    export default {
        name: "user-list",
        components: {GroupSet},
        props:{
            usersList:{
                type:Array
            },
            groupId:{
                type:String
            }
        },
        created(){
            //查询登录账号是否为此群群主
            this.isOrNotGroupManager()
        },
        data() {
            return {
                search: '',
                groupSetVisible: false,
                currentItem: null,
                isGroupManager: false,
                /*aa*/
            }
        },
        computed: {
            ...mapGetters(['userId', 'username', 'phone'])
        },
        methods: {
            handleSet(index, row) {
                this.groupSetVisible = true
                this.currentItem = row
            },
            isOrNotGroupManager() {//判断是否为群主
                isOrNotGroupManager(this.groupId,this.userId).then(res => {
                    this.isGroupManager= res.data;
                })
            },
            success(res) {
                this.groupSetVisible = res
            }
        },
        mounted() {

        }
    }
</script>


<style scoped>
    .table-pos {
        width: 225px;
        position: absolute;
        right: 10px;
        top:50px;
    }
    .image-pos {
        position: relative;
        margin-right: 15px;
    }
</style>
